<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.movebox{
				width: 750px;
				height: 432px;
				
				/*声明调用movebox动画*/
				animation: movebox 2s infinite;
				
				/*改变默认方式，支持坐标系 默认动画加载执行一次 infinite循环执行，永不停息*/
				position: relative;
			}
			
			/*定义一个动画(关键帧)*/
			/*动画由一帧一帧图片组成，1秒36帧以上，人眼无法察觉*/
			/*动画一定要设置它的坐标系*/
			@keyframes movebox{
				from{
					background-image: url(../images/user4.jpg);
					left: 0px;
					}/*代表动画开始的位置*/
				to{
					background-image: url(../images/user3.jpg);
					left: 500px;
					}/*代表动画结束的位置*/
				/*过程css+html会自动产生中间过程*/
			}
		</style>
	</head>
	<body>
		<h3>移动方块动画效果</h3>
		<h5>animation语法</h5>
		<div class="movebox"></div>
	</body>
</html>
